<template>
  <view class="container" style="padding-bottom: 100px" v-if="isLoaded">
    <view class="content" style="padding: 30rpx 30rpx 120rpx; background-color: #fff">
      <li-form ref="form">
        <li-form-item label="角色名称" required>
          <li-input placeholder="请输入角色名称" v-model="form.roleName" rule="trim" prop="roleName" v-on:blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="角色标识">
          <li-input placeholder="请输入角色标识" v-model="form.roleCode" rule="trim" prop="roleCode" v-on:blur="onBlurEvent($event)" />
        </li-form-item>
        <li-form-item label="角色类型">
          <li-picker
            placeholder="请选择角色类型"
            v-model="form.categoryId"
            rule="trim"
            :rangeList="[
              { label: `管理员`, value: 0 },
              { label: `员工`, value: 1 },
              { label: `收营员`, value: 2 }
            ]"
            :rangeKey="`label`"
            :rangeValue="`value`"
            v-on:blur="onBlurEvent($event)"
          />
        </li-form-item>
        <li-form-item label="备注">
          <li-textarea placeholder="请输入备注" v-model="form.comments" rule="trim" prop="comments" v-on:blur="onBlurEvent($event)" />
        </li-form-item>
      </li-form>
    </view>

    <li-bottom-btns :zIndex="10" :mode="mode" v-on:btnDelClick="btnDelClick" v-on:btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import liFormMixin from '../../../mixins/liFormMixin';
import dateUtils from '../../../utils/date.js';
import { transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum, booleanEnum, weekEnumable, couponTypeEnum } from '../../../constants/normalConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants.js';
import liValidateData, { validateTypeEnum } from '../../../utils/liValidator.js';
import { utoast } from '../../../utils/uniUtils.js';
import { AddSysRole, DelSysRoleById, EditSysRole, GetSysRoleById } from '../../../common/modules/m.js';
export default {
  mixins: [liFormMixin],
  async onLoad(options) {
    this.loadEvent(options, this);
  },

  async mounted() {
    this.mountedEvent(this, {
      roleName: '',
      roleCode: '',
      corpId,
      storeId,
      categoryId: 0,
      comments: ''
    });
  },

  data() {
    return {
      modeEnum,
      weekEnumable,
      booleanEnum,
      subject: '角色',
      rootRoute: 'workbench',
      routeName: 'role',
      mode: 'add',
      isLoaded: false,
      id: null,
      getFn: GetSysRoleById,
      addFn: AddSysRole,
      delFn: DelSysRoleById,
      editFn: EditSysRole,
      popLeftFn: null,
      popLeftList: [],
      popPageFn: null,
      popPageList: [],
      otherDataFns: [],
      /* form */
      form: null,
      /* popup */
      show: false,
      // transfer
      transferRules: [
        /*   {
          name: "programmeCode",
          type: transferTypeEnum.trim,
        },
        {
          name: "programmeName",
          type: transferTypeEnum.trim,
        }, */
      ],
      //check rule
      rules: {
        roleName: {
          type: validateTypeEnum.string,
          required: true,
          message: '请填写角色名称'
        }
        /*    roleCode: {
          type: validateTypeEnum.string,
          required: true,
          message: "请填写角色标识",
        }, */
      },
      lock: false,

      /* extra data */

      type: 1,
      popPageList: []
      /* extra rules */

      /* extra transfer */
    };
  },

  methods: {
    async onBlurEvent(e) {
      this.formBlur(e, this);
    },

    async getOtherData() {
      // ..
    },

    async btnEditOrSaveSubmitClick() {
      await this.formInsertOrEdit(this);
    }

    /* extra methods */

    // method put on the top
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
</style>
